<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

   <div id="app"></div>

   <script src="../../js/react.development.js"></script>
   <script src="../../js/react-dom.development.js"></script>
   <script src="../../js/babel.min.js"></script>


    <script type="text/babel">

        // 获取异步函数setState结果
        // 1 回调函数 =>第二个参数传递回调函数 
        // 2 封装Promise
        // 3 异步函数 async...await 

      
        class App extends React.Component{

            state={a:0}

            handleClick=async ()=>{
            
                // async await 获取
                // var result =  await this.setStatePromise({a:1})
                // console.log(result); //undefined 因为 ： resolve() 没有返回值参数

                // await this.setStatePromise({a:1})  
                // console.log(this.state.a);//setState 变成同步

                // await this.setStatePromise((pState,props)=>{
                //     return {a:pState.a+1}
                // })  
                // await this.setStatePromise((pState,props)=>{
                //     return {a:pState.a+1}
                // })  
                // console.log(this.state.a);//setState 变成同步

                //async await 函数 错误捕获： try...catch
                try { 
                    await this.setStatePromise(10)  
                } catch (error) {
                    console.log(error);
                }
                
  

            }


            setStatePromise=(value)=>{
                return new Promise((resolve,reject)=>{
                    if(typeof value==='object' ||typeof value==='function' ){
                        // var callback = resolve()
                        // this.setState(value,callback)
    
                        this.setState(value,resolve())
                    }else{
                        reject('setStatePromise 参数不对')
                    }
                })
            }
            


            render(){
                return (
                    <div>
                        <h1>{this.state.a}</h1>
                        <button onClick={this.handleClick}>click</button>
                    </div>
                    )
            }
        }

          

        ReactDOM.render(<App />,document.getElementById('app'))
    </script>
</body>
</html>